<script setup lang="ts">
const props = withDefaults(defineProps<{
  title: string
  picture: string
  org?: string
  createdAt?: string
  teacher?: string
  hideShadow: boolean
  showDivider: boolean
}>(), {
  hideShadow: false,
  showDivider: false,
})

const constraintTitleHeight = computed(() => {
  return props.teacher && props.org && props.createdAt
})
</script>

<template>
  <!-- 卡片 START -->
  <view
    class="relative rounded-20rpx bg-white p-25rpx" :class="hideShadow ? '' : 'card-shadow'"
  >
    <!-- 左侧预览图 -->
    <view v-if="withDomain(props.picture)" class="absolute left-25rpx top-1/2 -translate-y-1/2">
      <uv-image v-if="withDomain(props.picture)" :src="withDomain(props.picture)" width="180rpx" height="180rpx" radius="10rpx" :observe-lazy-load="true">
        <template #loading>
          <uv-loading-icon color="#666666" />
        </template>
      </uv-image>
    </view>
    <view v-else class="absolute left-20rpx top-1/2 h-180rpx w-180rpx flex items-center justify-center rounded-10rpx bg-#0037AE bg-opacity-10 -translate-y-1/2">
      <image
        class="h-82rpx w-92rpx"
        src="@/static/images/book.png"
      />
    </view>
    <!-- 右侧内容 -->
    <view class="ml-205rpx h-180rpx flex flex-col justify-between">
      <!-- 标题 -->
      <view class="h-80rpx overflow-hidden text-ellipsis text-28rpx text-#333333 font-medium leading-40rpx" :class="constraintTitleHeight ? 'max-h-40rpx' : ''">
        {{ props.title || '未知' }}
      </view>
      <view>
        <!-- 老师 -->
        <view v-if="props.teacher" class="flex items-center">
          <image src="../static/images/person.png" class="h-24rpx w-24rpx flex-shrink-0" />
          <Spacer width="16" />
          <view class="h-32rpx overflow-hidden text-ellipsis text-24rpx text-#666666 leading-32rpx">
            {{ props.teacher || '未知' }}
          </view>
        </view>
        <Spacer height="12" />
        <!-- 机构 -->
        <view v-if="props.org" class="flex items-center">
          <image src="../static/images/building.png" class="h-24rpx w-24rpx flex-shrink-0" />
          <Spacer width="16" />
          <view class="h-32rpx overflow-hidden text-ellipsis text-24rpx text-#666666 leading-32rpx">
            {{ props.org || '未知' }}
          </view>
        </view>
        <Spacer height="12" />
        <!-- 时间 -->
        <view v-if="props.createdAt" class="flex items-center">
          <image src="../static/images/clock.png" class="h-24rpx w-24rpx flex-shrink-0" />
          <Spacer width="16" />
          <view class="h-32rpx overflow-hidden text-ellipsis text-24rpx text-#666666 leading-32rpx">
            {{ props.createdAt || '未知时间' }}
          </view>
        </view>
      </view>
    </view>
    <view v-if="showDivider" class="absolute bottom-0 left-1/2 -translate-x-1/2">
      <Divider width="652" />
    </view>
  </view>
  <!-- 卡片 END -->
</template>
